<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制图片</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="300" >
    你的浏览器不支持canvas，请升级浏览器
</canvas>
<script type="text/javascript">
    //获得画布
    var canvas=document.getElementById('cavsElem');
    //设置画布边框
    canvas.style.border="1px solid #000";
    //获取上下文
    var context = canvas.getContext('2d');
    //创建图片对象
    var img=new Image();
    //设置图片路径
    img.src="demo2-3/images/img1.jpg";
    //当页面加载完成使用此图片
    img.onload = function(){
        //使用canvas绘制图片
        context.drawImage(img,0,0);
    };
</script>
</body>
</html>
